<template>
  <div class="component-table">
    <div class="second-title">
      <!-- <div class="title">{{ formItem.setName }}</div> -->
      <div
        class="add-btn"
        v-if="formItem.viewType == 2 && !disabled"
        @click="handleAddRow"
      >
        <span class="add-text">新增</span>
        <i class="icon el-icon-circle-plus-outline"></i>
      </div>
    </div>
    <el-table :data="formItem.setValue">
      <el-table-column
        v-for="item in formItem.customData"
        :prop="item.key"
        :label="item.value"
        :key="item.key"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="690px"
      :title="`新增${formItem.setName}`"
      :visible.sync="addVisible"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="form-wrapper" v-if="addVisible">
        <el-scrollbar class="el-scrollbar-x-hidden">
          <el-form
            class="form"
            ref="form"
            label-width="auto"
            size="small"
            label-suffix="："
          >
            <el-row :gutter="20">
              <template v-for="item in formItem.customData">
                <!-- 如果是1，则是一行2个 -->
                <el-col
                  v-if="getComponentType(item.componentType) == 1"
                  :span="12"
                  :key="item.setKey"
                >
                  <el-form-item :label="item.value" :prop="item.setKey">
                    <ComponentOne
                      :formItem="item"
                      @change="handleFormChange"
                    ></ComponentOne>
                  </el-form-item>
                </el-col>
                <!-- 如果是2，则是一行1个 -->
                <el-col
                  v-if="getComponentType(item.componentType) == 2"
                  :span="24"
                  :key="item.setKey"
                >
                  <el-form-item :label="item.value" :prop="item.setKey">
                    <ComponentTwo
                      :formItem="item"
                      @change="handleFormChange"
                    ></ComponentTwo>
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { componentTypeMap } from '@/utils/dataMap';
import ComponentOne from './ComponentOne';
import ComponentTwo from './ComponentTwo';
export default {
  components: { ComponentOne, ComponentTwo },
  props: {
    formItem: {
      type: Object,
      default: () => {}
    },
    forbidEditField: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addVisible: false,
      addType: 'add',
      currentSetValue: {},
      storageSetValue: {},
      currentEditIndex: ''
    };
  },
  methods: {
    handleConfirm() {
      if (this.addType === 'add') {
        this.formItem.setValue.unshift(
          JSON.parse(JSON.stringify(this.currentSetValue))
        );
      } else {
        this.formItem.setValue.splice(
          this.currentEditIndex,
          1,
          this.currentSetValue
        );
      }
      this.addVisible = false;
    },
    handleCancel() {
      this.addVisible = false;
    },
    handleFormChange(key, val) {
      this.currentSetValue[key] = JSON.parse(val);
    },
    handleEdit(index, row) {
      this.handleCurrentSetValue();
      this.addType = 'edit';
      this.currentEditIndex = index;
      this.currentSetValue = JSON.parse(JSON.stringify(row));
      this.formItem.customData.forEach((item) => {
        item.setValue = row[item.setKey];
      });
      this.addVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.formItem.setValue.splice(index, 1);
          this.$message({
            type: 'success',
            message: '点击完成编辑或者下方确认按钮后将永久删除'
          });
        })
        .catch(() => {});
    },
    handleAddRow() {
      this.handleCurrentSetValue();
      this.addType = 'add';
      this.currentSetValue = {};
      this.formItem.customData.forEach((item) => {
        item.setValue = '';
        this.$set(this.currentSetValue, item.setKey, '');
      });
      this.addVisible = true;
    },
    getComponentType(type) {
      return componentTypeMap[type];
    },
    handleCurrentSetValue() {
      if (Object.keys(this.currentSetValue).length) return;
      this.formItem.customData.forEach((item) => {
        this.$set(this.currentSetValue, item.setKey, '');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.component-table {
  .second-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    .add-btn {
      // margin-left: 14px;
      color: #7052ff;
      display: flex;
      align-items: center;
      cursor: pointer;
      .add-text {
        margin-right: 4px;
        font-size: 13px;
      }
      .icon {
        font-size: 18px;
      }
    }
  }
}
.form-wrapper {
  height: 200px;
  .form {
    padding: 0 12px;
  }
  // /* 解决自定义滚动条 x 轴显示问题 */
  // .el-scrollbar-x-hidden {
  //   height: 100%;
  //   /* 解决自定义滚动条 x 轴显示问题 */
  // }
  // ::v-deep .el-scrollbar__wrap {
  //   overflow-x: hidden;
  // }
}
</style>
